import React, { Component } from 'react'
import { connect } from 'react-redux'
import actionCreator from '@/store/actionCreator'
import { uploadReq } from '@/utils/request'
import { USERAVATAR } from '@/store/actionType'
import { Upload, message, Form, Button } from 'antd'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import styled from 'styled-components'
import JudgeLogin from '@/components/Hoc/judge'

const Div = styled.div`
.avatar-uploader {
  .ant-upload {
    width: 128px;
    height: 128px;
  }
}
`
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
}


const mapStateToProps = (state, ownProps) => {
  return {
    avatar: state.getIn(['user', 'obj', 'avatar']),
    nickname: state.getIn(['user', 'obj', 'nickname']),
    email: state.getIn(['user', 'obj', 'email']),
  }
}
const mapDispatchToProps = {
  getUserAvatar: (form) => {
    return uploadReq(form).then((res) => {
      if (res.code === 200) {
        return {
          type: USERAVATAR,
          payload: res.path
        }
      }
    })
  },
  setBreadList: actionCreator.setBreadList
}
@connect(mapStateToProps, mapDispatchToProps)
@JudgeLogin
class Mine extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    }
  }
  componentDidMount() {
    this.props.setBreadList(['个人信息', 'Mine'])
  }
  // 上传前验证
  beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error({ duration: 1, content: '类型限制JPG/PNG' });
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error({ duration: 1, content: '大小不超过 2MB!' });
    }
    return isJpgOrPng && isLt2M;
  }
  // 上传
  upload = ({ file }) => {
    this.setState({ loading: true });
    let form = new FormData();
    form.append("file", file)
    this.props.getUserAvatar(form).then(() => {
      this.setState({
        loading: false
      })
    })
  }

  render() {
    const uploadButton = (
      <div>
        {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return <div>
      <Form
        {...formItemLayout}
      >
        <Form.Item label="用户名">
          {this.props.nickname}
        </Form.Item>
        <Form.Item label="账号">
          {this.props.email}
        </Form.Item>
        <Form.Item label="更换头像" name="layout">
          <Div>
            <Upload
              style={{ height: 100, width: 100, border: "1px dashed #ccc", display: "block" }}
              customRequest={this.upload} name="avatar"
              listType="picture-card"
              className="avatar-uploader"
              beforeUpload={this.beforeUpload}
              showUploadList={false}
            >
              {this.props.avatar ?
                <img
                  src={this.props.avatar || '/topaz-blog/qq.jpg'}
                  style={{ width: '100%' }} alt="avatar" /> :
                uploadButton}
            </Upload>
          </Div>
        </Form.Item>
        <Form.Item label="修改密码">
          <Button onClick={() => this.props.history.push('/user/modify')}>
            修改密码
        </Button>
        </Form.Item>
      </Form>
    </div>
  }

}
export default Mine
